import React, { useState, useEffect } from "react";
import {
  HashRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import { Suspense, lazy } from "react";

// Lazy load components for code splitting
const Transfer = lazy(() => import("./views/transfer"));
const Home = lazy(() => import("./views/framework"));
const Square = lazy(() => import("./views/framework/components/square"));
const Preview = lazy(() => import("./views/preview"));
const SquareEnd = lazy(() => import("./views/agents/squareend"));
const Demo = lazy(() => import("./views/demo"));
const ErrorCatch = lazy(() => import("./views/common/errorCatch"));
const File = lazy(() => import('./views/framework/components/file'));
const Ceshi = lazy(() => import("./views/agents/ceshi"));

function App(props) {
  const [graphClient, setGraphClient] = useState(null);
  const [calendarEvents, setCalendarEvents] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      console.log("props.msgraph",props.msgraph)
      console.log("props",props)
      try {
        // 获取 Graph 客户端
        const client = await props.msgraph.msGraphClientFactory.getClient("3");
        console.log("props.msgraph",props.msgraph)
        console.log("props.msgraph",props)
        setGraphClient(client);
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Navigate to="/transfer" replace />} />
          <Route path="/transfer" element={<Transfer />} />
          <Route 
            path="/home" 
            element={
              <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
                <Home 
                  graphClient={graphClient} 
                  calendarEvents={calendarEvents}
                  context={props.msgraph}
                />
              </div>
            }
          >
            <Route path="square" element={<Square context={props.msgraph} />} />
            <Route path="file" element={<File />} />
          </Route>
          <Route path="/preview" element={<Preview />} />
          <Route path="/squareend" element={<SquareEnd />} />
          <Route path="/ceshi" element={<Ceshi  context={props.msgraph}  />} />
          
          <Route path="/demo" element={<Demo />} />
          <Route path="*" element={<ErrorCatch />} />
        </Routes>
      </Suspense>

      <style jsx="true">
        {`
          .commandBarWrapper {
            display: none !important;
            min-height: 0 !important;
          }
          .mainHeader-51 {
            display: none !important;
          }
    
          .a_e_50a7110f:not(.b_e_50a7110f):not(.j_e_50a7110f) {
            padding: 0 !important;
          }
          .a_f_50a7110f:not(.b_f_50a7110f):not(.z_f_50a7110f) {
            margin: 0 !important;
            padding: 0 !important;
          }
          .a_a_50a7110f:not(.b_a_50a7110f) {
            padding: 0 !important;
          }
          .mainHeader-108 {
            display: none !important;
          }
          .main-container {
            width: 100vw !important;
          }
          .mainHeader-109{
            display: none !important;
          }
          .j_b_8474018e{
            width: 100vw !important;
          }

          /* 使用深度选择器 */
          :global(.c_b_4ade22aa) {
            display: flex !important;
            flex-direction: row !important;
            width: 100% !important;
          }

          /* 使用属性选择器进行样式穿透 */
          :global([class*="c_b_4ade22aa"]) {
            display: flex !important;
            flex-direction: row !important;
            width: 100% !important;
          }
:deep(.c_b_4ade22aa){
     display: flex !important;
            flex-direction: row !important;
            width: 100% !important;
}
          .headerRow-50.headerRow-50.headerRow-50.headerRow-50.headerRow-50{
            display: none !important;
          }
        `}
      </style>
    </Router>
  );
}

export default App;